<script setup lang="ts">
import { ref } from "vue";
import type { PropType, Ref } from "vue";
import type { AxiosRequestConfig } from "axios";
import axiosInst from "@/utils/request";

type ApiFun = () => AxiosRequestConfig;

const props = defineProps({
  api: {
    type: [Object, Function] as PropType<AxiosRequestConfig | ApiFun>,
    required: true,
  },
  height: {
    type: String as PropType<string>,
    default: "100%",
  },
});

const refreshing: Ref<boolean> = ref(false);
const loading: Ref<boolean> = ref(false);
const finished: Ref<boolean> = ref(false);
const list: Ref<any[]> = ref([]);

const load = () => {
  const apiConfig = typeof props.api == "function" ? props.api() : props.api;
  axiosInst
    .request(apiConfig)
    .then((res) => {
      refreshing.value = false;
      list.value = res.data.rows;
      loading.value = false;

      finished.value = true;
    })
    .catch(() => {});
};


defineExpose({
  load,
});
</script>

<template>
  <van-pull-refresh
    v-model="refreshing"
    :style="{
      height: props.height,
    }"
    @refresh="
      () => {
        loading = true;
        load();
      }
    "
  >
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      class="yi-list"
      @load="load"
    >
      <slot :list="list" :load="load" />
    </van-list>
  </van-pull-refresh>
</template>

<style>
.yi-list {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
</style>
